<template>
  <div class="reply__module" ref="replyContent">
    <header class="header__item">{{totalCount || '暂无'}} 评论</header>
    <paginationModule />
    <sendModule :aid="aid" @success="getReplyList" />
    <template v-for="reply in replyList">
      <replyContent :aid="aid" :key="reply.rpid" :reply="reply" @delete="deleteHandler" />
    </template>
    <template v-if="replyList.length>5">
      <paginationModule bottom="true" />
      <sendModule :aid="aid" @success="buttonSendSuccessHandler" />
    </template>
  </div>
</template>

<script>
import { getReplyListAPI } from '@/api/reply';
import sendModule from './components/sendModule.vue';
import replyContent from './components/replyContent.vue';
import { getElementTop } from '../../utils';

export default {
    name: 'ReplyModule',
    components: {
        sendModule,
        replyContent,
        paginationModule: {
            props: ['bottom'],
            computed: {
                layout() {
                    return this.bottom ? 'prev, pager, next, jumper' : '->,prev, pager, next, jumper';
                },
            },
            render() {
                return (
                    <el-pagination
                        small
                        background
                        prev-text="上一页"
                        next-text="下一页"
                        layout={this.layout}
                        total={this.$parent.count}
                        page-size={this.$parent.size}
                        current-page={this.$parent.page}
                        on-current-change={this.$parent.currentPageHandler}
                    />
                );
            },
        },
    },
    props: {
        aid: {
            type: [Number, String],
            required: true,
        },
    },
    data() {
        return {
            replyData: {},
            page: 1,
            size: 20,
        };
    },
    computed: {
        replyList() {
            return this.replyData.replies || [];
        },
        count() {
            return this.replyData.count || 0;
        },
        totalCount() {
            return this.replyData.acount || 0;
        },
    },
    created() {
        this.getReplyList();
    },
    methods: {
        async getReplyList() {
            const { page, size } = this;
            const { data } = await getReplyListAPI(this.aid, { page, size });
            this.replyData = data;
        },
        async currentPageHandler(page) {
            this.page = page;
            this.getReplyList();
        },
        async buttonSendSuccessHandler() { // 底部这个发送框还真是事多
            this.page = 1;
            await this.getReplyList();
            this.getReplyContentPath();
        },
        getReplyContentPath() {
            const { replyContent: element } = this.$refs;
            const path = getElementTop(element);
            window.scroll({ top: path, behavior: 'smooth' });
        },
        deleteHandler() {
            this.getReplyList();
        },
    },
};
</script>

<style lang="less">
.reply__module {
  margin-top: 50px;
  padding: 20px;
  background-color: fade(#fff, 90%);
  border: 5px solid @base_color;
  box-shadow: 5px -5px 0px @base_color_2;
  .header__item {
    font-size: 18px;
    font-weight: bold;
    color: @global_text_color;
    margin-bottom: 20px;
  }
}
</style>
